<template>
  <view class="record-page">

    
    <!-- 统计概览 -->
    <view class="stats-section">
      <view class="stats-card">
        <view class="stats-item">
          <text class="stats-number">{{ statistics.totalCount }}</text>
          <text class="stats-label">总记录数</text>
        </view>
        <view class="stats-item">
          <text class="stats-number">¥{{ statistics.totalFee }}</text>
          <text class="stats-label">总费用</text>
        </view>
        <view class="stats-item">
          <text class="stats-number">{{ statistics.avgDuration }}</text>
          <text class="stats-label">平均时长</text>
        </view>
      </view>
    </view>
    
    <!-- 筛选区域 -->
    <view class="filter-section">
      <view class="filter-row">
        <u-input
          v-model="searchKeyword"
          placeholder="搜索车牌号或位置"
          prefix-icon="search"
          clearable
          @input="handleSearch"
        />
      </view>
      <view class="filter-row">
        <u-tabs 
          :list="filterTabs" 
          @click="handleFilterChange"
          :active-color="'#1890ff'"
          :inactive-color="'#666'"
        />
      </view>
    </view>
    
    <!-- 记录列表 -->
    <view class="record-list">
      <view 
        v-for="record in filteredRecords" 
        :key="record.id"
        class="record-item"
        @click="handleViewDetail(record)"
      >
        <view class="record-header">
          <view class="record-info">
            <text class="plate-number">{{ record.plateNumber }}</text>
            <u-tag 
              :text="record.statusText" 
              :type="getStatusType(record.status)" 
              size="mini"
            />
          </view>
          <text class="record-time">{{ record.enterTime }}</text>
        </view>
        
        <view class="record-details">
          <view class="detail-row">
            <text class="detail-label">停车位置：</text>
            <text class="detail-value">{{ record.location }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">入场时间：</text>
            <text class="detail-value">{{ record.enterTime }}</text>
          </view>
          <view class="detail-row" v-if="record.exitTime">
            <text class="detail-label">出场时间：</text>
            <text class="detail-value">{{ record.exitTime }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">停车时长：</text>
            <text class="detail-value">{{ record.duration }}</text>
          </view>
          <view class="detail-row">
            <text class="detail-label">停车费用：</text>
            <text class="detail-value fee-amount">¥{{ record.fee }}</text>
          </view>
        </view>
        
        <view class="record-actions">
          <u-button 
            size="mini" 
            type="info" 
            @click.stop="handleViewDetail(record)"
          >
            查看详情
          </u-button>
          <u-button 
            v-if="record.status === 1"
            size="mini" 
            type="warning" 
            @click.stop="handleExtendParking(record)"
          >
            续费停车
          </u-button>
        </view>
      </view>
    </view>
    
    <!-- 加载更多 -->
    <u-loadmore 
      :status="loadmoreStatus"
      @loadmore="loadMore"
    />
    
    <!-- 详情弹窗 -->
    <u-popup v-model="detailVisible" mode="bottom" border-radius="16">
      <view class="detail-popup">
        <view class="popup-header">
          <text class="popup-title">停车详情</text>
          <u-icon name="close" @click="detailVisible = false"></u-icon>
        </view>
        
        <view class="detail-content" v-if="currentRecord">
          <view class="detail-section">
            <text class="section-title">车辆信息</text>
            <view class="detail-item">
              <text class="item-label">车牌号：</text>
              <text class="item-value">{{ currentRecord.plateNumber }}</text>
            </view>
            <view class="detail-item">
              <text class="item-label">车辆类型：</text>
              <text class="item-value">{{ currentRecord.vehicleType }}</text>
            </view>
          </view>
          
          <view class="detail-section">
            <text class="section-title">停车信息</text>
            <view class="detail-item">
              <text class="item-label">停车位置：</text>
              <text class="item-value">{{ currentRecord.location }}</text>
            </view>
            <view class="detail-item">
              <text class="item-label">入场时间：</text>
              <text class="item-value">{{ currentRecord.enterTime }}</text>
            </view>
            <view class="detail-item" v-if="currentRecord.exitTime">
              <text class="item-label">出场时间：</text>
              <text class="item-value">{{ currentRecord.exitTime }}</text>
            </view>
            <view class="detail-item">
              <text class="item-label">停车时长：</text>
              <text class="item-value">{{ currentRecord.duration }}</text>
            </view>
          </view>
          
          <view class="detail-section">
            <text class="section-title">费用信息</text>
            <view class="detail-item">
              <text class="item-label">停车费用：</text>
              <text class="item-value fee-amount">¥{{ currentRecord.fee }}</text>
            </view>
            <view class="detail-item">
              <text class="item-label">计费标准：</text>
              <text class="item-value">{{ currentRecord.rateInfo }}</text>
            </view>
          </view>
        </view>
        
        <view class="popup-actions">
          <u-button @click="detailVisible = false">关闭</u-button>
          <u-button 
            v-if="currentRecord && currentRecord.status === 1"
            type="primary" 
            @click="handlePayment(currentRecord)"
          >
            立即支付
          </u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
/**
 * 停车记录页面
 * @author Wu.Liang
 * @date 2025-01-21
 */

import { ref, computed, onMounted } from 'vue'

// 响应式数据
const searchKeyword = ref('')
const detailVisible = ref(false)
const currentRecord = ref(null)
const loadmoreStatus = ref('more')

// 筛选标签
const filterTabs = ref([
  { name: '全部' },
  { name: '进行中' },
  { name: '已完成' },
  { name: '已取消' }
])

// 停车记录数据
const parkingRecords = ref([
  {
    id: 1,
    plateNumber: '京A12345',
    vehicleType: '小型车',
    location: 'A区停车场-01号车位',
    enterTime: '2025-01-21 08:30',
    exitTime: '2025-01-21 17:45',
    duration: '9小时15分钟',
    fee: '18.00',
    status: 2,
    statusText: '已完成',
    rateInfo: '2元/小时，不足1小时按1小时计费'
  },
  {
    id: 2,
    plateNumber: '京B67890',
    vehicleType: '小型车',
    location: 'B区停车场-15号车位',
    enterTime: '2025-01-21 09:15',
    exitTime: null,
    duration: '进行中',
    fee: '0.00',
    status: 1,
    statusText: '进行中',
    rateInfo: '2元/小时，不足1小时按1小时计费'
  },
  {
    id: 3,
    plateNumber: '京C11111',
    vehicleType: '中型车',
    location: 'C区停车场-08号车位',
    enterTime: '2025-01-20 14:20',
    exitTime: '2025-01-20 22:30',
    duration: '8小时10分钟',
    fee: '16.00',
    status: 2,
    statusText: '已完成',
    rateInfo: '2元/小时，不足1小时按1小时计费'
  },
  {
    id: 4,
    plateNumber: '京D22222',
    vehicleType: '小型车',
    location: 'D区停车场-12号车位',
    enterTime: '2025-01-20 10:00',
    exitTime: '2025-01-20 16:45',
    duration: '6小时45分钟',
    fee: '14.00',
    status: 2,
    statusText: '已完成',
    rateInfo: '2元/小时，不足1小时按1小时计费'
  },
  {
    id: 5,
    plateNumber: '京E33333',
    vehicleType: '小型车',
    location: 'E区停车场-05号车位',
    enterTime: '2025-01-19 18:30',
    exitTime: '2025-01-20 09:15',
    duration: '14小时45分钟',
    fee: '30.00',
    status: 2,
    statusText: '已完成',
    rateInfo: '2元/小时，不足1小时按1小时计费'
  },
  {
    id: 6,
    plateNumber: '京F44444',
    vehicleType: '小型车',
    location: 'F区停车场-20号车位',
    enterTime: '2025-01-19 12:00',
    exitTime: '2025-01-19 15:30',
    duration: '3小时30分钟',
    fee: '8.00',
    status: 2,
    statusText: '已完成',
    rateInfo: '2元/小时，不足1小时按1小时计费'
  }
])

// 统计信息
const statistics = computed(() => {
  const totalCount = parkingRecords.value.length
  const totalFee = parkingRecords.value
    .filter(record => record.status === 2)
    .reduce((sum, record) => sum + parseFloat(record.fee), 0)
    .toFixed(2)
  
  // 计算平均时长（只计算已完成的记录）
  const completedRecords = parkingRecords.value.filter(record => record.status === 2)
  const avgDuration = completedRecords.length > 0 ? '9小时' : '0小时'
  
  return {
    totalCount,
    totalFee,
    avgDuration
  }
})

// 筛选后的记录
const filteredRecords = computed(() => {
  let records = parkingRecords.value
  
  // 关键词搜索
  if (searchKeyword.value) {
    records = records.filter(record => 
      record.plateNumber.includes(searchKeyword.value) ||
      record.location.includes(searchKeyword.value)
    )
  }
  
  return records
})

// 获取状态类型
const getStatusType = (status) => {
  switch (status) {
    case 1: return 'warning'  // 进行中
    case 2: return 'success'  // 已完成
    case 3: return 'error'    // 已取消
    default: return 'info'
  }
}

// 处理搜索
const handleSearch = () => {
  // 搜索逻辑已在computed中处理
}

// 处理筛选
const handleFilterChange = (index) => {
  // 筛选逻辑已在computed中处理
}

// 查看详情
const handleViewDetail = (record) => {
  currentRecord.value = record
  detailVisible.value = true
}

// 续费停车
const handleExtendParking = (record) => {
  uni.showToast({
    title: '续费功能开发中',
    icon: 'none'
  })
}

// 支付
const handlePayment = (record) => {
  uni.navigateTo({
    url: `/pages/payment/index?amount=${record.fee}&type=parking&recordId=${record.id}`
  })
}

// 加载更多
const loadMore = async () => {
  loadmoreStatus.value = 'loading'
  try {
    // 模拟加载更多数据
    await new Promise(resolve => setTimeout(resolve, 1000))
    loadmoreStatus.value = 'more'
  } catch (error) {
    loadmoreStatus.value = 'noMore'
  }
}

// 页面加载
onMounted(() => {
  console.log('停车记录页面加载完成')
  console.log('原始数据:', parkingRecords.value)
  console.log('筛选后数据:', filteredRecords.value)
  console.log('统计信息:', statistics.value)
})
</script>

<style lang="scss" scoped>
.record-page {
  min-height: 100vh;
  width: 100vw;
  background-color: #f5f5f5;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.stats-section {
  padding: 20px 16px 16px;
  
  .stats-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-around;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .stats-item {
      text-align: center;
      
      .stats-number {
        display: block;
        font-size: 24px;
        font-weight: 600;
        color: #1890ff;
        margin-bottom: 4px;
      }
      
      .stats-label {
        display: block;
        font-size: 12px;
        color: #666;
      }
    }
  }
}

.filter-section {
  padding: 0 16px 16px;
  
  .filter-row {
    margin-bottom: 12px;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.record-list {
  padding: 0 16px;
  
  .record-item {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .record-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      
      .record-info {
        display: flex;
        align-items: center;
        gap: 8px;
        
        .plate-number {
          font-size: 16px;
          font-weight: 600;
          color: #333;
        }
      }
      
      .record-time {
        font-size: 12px;
        color: #666;
      }
    }
    
    .record-details {
      margin-bottom: 16px;
      
      .detail-row {
        display: flex;
        margin-bottom: 6px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .detail-label {
          font-size: 13px;
          color: #666;
          width: 80px;
          flex-shrink: 0;
        }
        
        .detail-value {
          font-size: 13px;
          color: #333;
          flex: 1;
          
          &.fee-amount {
            color: #f5222d;
            font-weight: 600;
          }
        }
      }
    }
    
    .record-actions {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }
  }
}

.detail-popup {
  background: white;
  border-radius: 16px 16px 0 0;
  padding: 20px;
  
  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    
    .popup-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
    }
  }
  
  .detail-content {
    .detail-section {
      margin-bottom: 20px;
      
      .section-title {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f0f0;
      }
      
      .detail-item {
        display: flex;
        margin-bottom: 8px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .item-label {
          font-size: 14px;
          color: #666;
          width: 80px;
          flex-shrink: 0;
        }
        
        .item-value {
          font-size: 14px;
          color: #333;
          flex: 1;
          
          &.fee-amount {
            color: #f5222d;
            font-weight: 600;
          }
        }
      }
    }
  }
  
  .popup-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 20px;
  }
}

/* 响应式设计 */
@media screen and (max-width: 480px) {
  .record-page {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
  
  .stats-card {
    padding: 16px;
    
    .stats-item .stats-number {
      font-size: 20px;
    }
  }
  
  .record-item {
    padding: 12px;
    
    .record-header .record-info .plate-number {
      font-size: 15px;
    }
  }
}

@media screen and (min-width: 414px) {
  .record-page {
    width: 100vw;
    max-width: none;
    margin: 0;
  }
}
</style> 